<template>
  <el-button @click="handle">预览(1)</el-button>
  <!-- <el-button plain @click="dialogFormVisible_datas = true">预览(2 加载外部数据记录)</el-button>-->

  <el-dialog v-model="dialogFormVisible_datas" title="加载外部数据记录" width="1980">
    <el-form :model="form" label-width="auto" style="max-width: 1860px"><br>
      <el-form-item label="json">
        <el-input v-model="form.onUpdateData_echo" type="textarea" rows="20" clearable
                  class="scrollable-textarea"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible_datas = false">Cancel</el-button>
        <el-button type="primary" @click="onSubmitDataset('chartDesignercd8main')">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
  <div id="container_cd8_Echo" style="width: 1900px; height: 1080px"></div>
</template>
<script setup lang="ts">
//挂载时候，构建bi展现器实例
import {onMounted, reactive, ref} from 'vue';

import {$bus} from "@/bus/index.js"
import {queryonUpdateDataFrom} from "@/utils/onUpdateDataUtils.js"

const dialogFormVisible_datas = ref(false);
let _onUpdateData;
let _onUpdateDatasetList;
let ___onUpdateData_echo;


const form = reactive({
  cdTemplateData_echo: reactive([]),
  onUpdateDatasetList_echo: reactive([]),
  onUpdateData_echo: reactive([])
})
const onSubmitDataset = (chartDesignercd8main) => {
  if (form.onUpdateData_echo.length > 0) {
    ___onUpdateData_echo = JSON.parse(form.onUpdateData_echo);

  }
  dialogFormVisible_datas.value = false;

}

let option = {};
let reportInstance = null;

//预先提供：以外部数据源的方式，动态请求来提供‘候选数据集列表’
function onUpdateDatasetList() {
  return new Promise((resolve, reject) => {
    resolve(_onUpdateDatasetList);
  })
}

option.onUpdateDatasetList = onUpdateDatasetList
// 废弃

let onUpdateData = (datasets, params) => {
  console.log("datasets:", datasets, "params:", params);
  return new Promise((resolve, reject) => {
    try {
      if (___onUpdateData_echo && ___onUpdateData_echo.length > 0) {
        resolve(queryonUpdateDataFrom(datasets, params, ___onUpdateData_echo));

      } else {
        resolve(queryonUpdateDataFrom(datasets, params, _onUpdateData));

      }
    } catch (error) {
      console.log(error);
    }
  })
}
option.onUpdateData = onUpdateData;


//导入BI报表对应的完整的数据集,既然是回显，应该是空画布。
onMounted(() => {
  option.reportConfig = [];
  option.reportData = [];
  option.paramsConfig = [];
});


const eventBusPreview = (config, dataConfig, _onUpdateDatasetList_main, _onUpdateData_main) => {
  option.reportConfig = config;
  option.reportData = [];
  option.paramsConfig = [];
  _onUpdateData = _onUpdateData_main;
  _onUpdateDatasetList = _onUpdateDatasetList_main;

  document.getElementById("container_cd8_Echo").innerHTML = "";//不可以缺少，因为点击preview时候，config是有可能变了。
  reportInstance = new XZDashboard("#container_cd8_Echo", option);
  reportInstance.on('_penetrate', (obj) => {
    console.log("content:", obj.content);
    console.log("values:", obj.values)
  })
  reportInstance.updateData(dataConfig);//这里传入的就是  chartDesigner模板需要的数据集名称，json数据集自带数据，外部数据不需要记录
  reportInstance.initView();
}

const handle = () => {
  $bus.emit("cd8_main_preview", eventBusPreview);
}
</script>


<style scoped>

</style>
